<template>
  <div class="table-wrap" ref="contentRef">
    <a-table
      :data-source="dataSource"
      :columns="columns"
      :row-key="rowKey"
      :pagination="false"
      :scroll="{ x: xScroll, y: maxHeight }"
    >
      <span
        class="table-title"
        v-for="(item, index) in slotHeadName"
        :slot="item.slot"
        :key="index"
      >
        {{ item.title }}
        <img
          v-if="item.icon === 'filter'"
          :src="FilterLogo"
          @click="(e) => clickHeadEmit(e, item.slot)"
        />
        <img
          class="search-icon"
          v-else
          :src="SearchLogo"
          @click="(e) => clickHeadEmit(e, item.slot)"
        />
      </span>
      <span
        v-for="(item, index) in slotName"
        :key="index"
        :slot="item"
        slot-scope="text, record"
      >
        <slot :name="item" :data="{ text, record }"></slot>
      </span>
      <span slot="operate" slot-scope="text, record, index">
        <span class="operate">
          <slot name="operation" :data="{ text, record, index }"></slot>
        </span>
      </span>
    </a-table>
  </div>
</template>
<script setup>
import {
  computed,
  defineEmits,
  defineProps,
  ref,
  onMounted,
  watch,
  onUnmounted,
} from "vue";
import FilterLogo from "@/assets/img/u190.png";
import SearchLogo from "@/assets/img/u235.png";
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  mySelectedRowKeys: {
    type: Array,
    default: () => [],
  },
  rowKey: {
    type: [String, Function],
    default: "id",
  },
  slotName: {
    type: Array,
    default: () => [],
  },
  slotHeadName: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  roleType: {
    type: Boolean,
    default: false,
  },
  userMan: {
    type: Boolean,
    default: false,
  },
  userAdmin: {
    type: Boolean,
    default: false,
  },
  pageNo: {
    type: Number,
    default: 1,
  },
  userId: {
    type: String,
    default: "*****888",
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});
const emits = defineEmits(["clickHeadEmit"]);
const xScroll = computed(() => {
  return props.columns.length * 150;
});
function clickHeadEmit(e, key) {
  emits("clickHeadEmit", e, key);
}
const contentRef = ref(null);
const maxHeight = ref(550);
function resizeView() {
  maxHeight.value = contentRef.value.clientHeight - 60;
}
watch(
  () => props.dataSource,
  () => {
    maxHeight.value = contentRef.value.clientHeight - 60;
  }
);
onMounted(() => {
  maxHeight.value = contentRef.value.clientHeight - 60;
  window.addEventListener("resize", resizeView);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeView);
});
</script>
<style lang="less" scoped>
.table-wrap {
  width: 100%;
  background-color: #fff;
  padding: 5px 0px 10px 0px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
/deep/
  .ant-table-thead
  > tr.ant-table-row-hover:not(.ant-table-expanded-row)
  > td,
/deep/
  .ant-table-tbody
  > tr.ant-table-row-hover:not(.ant-table-expanded-row)
  > td,
/deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
  //background: #f5f8ff;
}
/deep/ .ant-table-tbody > .hover > td {
  //background: #f5f8ff;
}
/deep/ .ant-table-tbody > tr > td {
  background-color: #fff;
  white-space: nowrap;
}

/deep/ .ant-table-thead {
  color: #333;
  background-color: #f1f1f4;
  tr {
    th {
      white-space: nowrap;
      background-color: #eaf0fe;
    }
  }
}
/deep/ .operate {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  align-items: center;
  &-item {
    color: #1067ee;
    cursor: pointer;
    white-space: nowrap;
  }
  &-item:hover {
    text-decoration: underline;
  }
}
.table-paging {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-table-header.ant-table-hide-scrollbar {
  background-color: #eaf0fe;
}
/deep/ .ant-table-thead > tr > th {
  padding: 8px 16px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 8px 16px;
}
.table-title {
  display: flex;
  align-items: center;
  gap: 5px;
  img {
    width: 15px;
    padding: 5px 2px;
    cursor: pointer;
  }
  .search-icon {
    width: 18px;
    padding: 2px 2px;
    cursor: pointer;
  }
  img:hover {
    background-color: rgba(133, 133, 135, 0.3);
  }
}
/deep/ .ant-table-body {
  padding-right: 10px;
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
/deep/ .ant-table-body-inner {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
</style>
